<template>
    <div class="auto-complete">
        <input v-model="keyword" type="text" class="input" :placeholder="placeholder" @input="keyup($event)">
        <!--<div class="data-list"></div>-->

        <van-popup v-model="show" position="bottom" style="height: 60%;border: 1px solid #ddd"  round safe-area-inset-top>
            <div class="data-list">
                <template v-for="item in companies">
                    <div class="popup-title" @click="chooseCompany(item)">{{item.name}}</div>
                </template>
            </div>
        </van-popup>
    </div>
</template>

<script>
    export default {
        name: "autoComplete",
        props: {
            placeholder: {
                type: String,
                default: '至少输入4个字'
            }
        },
        data(){
          return {
              show: false,
              companies: [],
              keyword: ''
          }
        },

        methods: {

             keyup(e){
                if(e.target.value.length >= 4){
                    this.$loading();
                    setTimeout(async _ => {
                        try {
                            const res = await this.getCompany(e.target.value, 1);
                            this.companies = res.data;
                            this.show = true;
                        }finally {
                            this.$loading.close();
                        }
                    },150);
                }
                if(e.target.value.length == 0){
                    this.show = false;

                }

            },


            //选择公司
            async chooseCompany(item){
                const res = await this.getCompanyInfo(item.keyNo);
                this.show = false;
                this.keyword = item.name;
                this.$emit('handle-choose', item,res.data);
            },


        }
    }
</script>

<style scoped lang="less">
    .auto-complete{
        position: relative;
        .input{
            &::placeholder{
                color: #ccc;
            }
            color: #333;
            border: none;
            outline: none;
            width: 100%
        }

        .data-list{
            height: 100%;
            >div{
                box-sizing: border-box;
                padding: @padding;
                border-bottom: 1px solid @border-color;
                &:active{
                    background-color: #ddd;
                }
            }
        }

    }

</style>
